<template>
    <article>
        <div class="select-time clearfix">
            <a-range-picker
                    format="YYYY-MM-DD"
                    :disabledDate="disabledDate"
                    :ranges="DateRanges"
                    :defaultValue="[$moment(btime), $moment(etime)]"
                    @change="timeChange"
                    style="width: 300px"/>
        </div>
        <div class="chartBox" ref="housePriceRentChart" v-show="!noDataShow"></div>
        <h5 ref="housePriceRent_chart_NoData" v-show="noDataShow">暂未查询到数据！</h5>

        <p v-show="false">{{getEstateHouseDetails}}</p>
    </article>
</template>

<script>

    export default {
        props: ['typeId'],//类型，1房价，2租金
        data() {
            return {
                EstateHouseId: this.$route.query.EstateHouseId, // 详情Id

                myEcharts: null,
                cityId: '',//城市Id
                btime: this.momentFormat(this.$moment().month(this.$moment().month() - 1).startOf('month').valueOf(), 'YYYY-MM-DD'), // 查询美元兑人民币-开始时间——上个月一号的00:00:00
                etime: this.momentFormat(this.$moment().month(this.$moment().month() - 1).endOf('month').valueOf(), 'YYYY-MM-DD'), // 查询美元兑人民币-结束时间——上个月最后一天的23:59:59
                DateRanges: null,//预设常用的日期范围以提高用户体验
                noDataShow: false, //详情数据——没有数据提示信息是否显示

            }
        },
        computed: {
            //从state获取新房详情数据
            getEstateHouseDetails() {
                //延时1s，否则会造成死循环，或者其他报错
                this.$nextTick(() => {
                    if(this.$store.getters.get_EstateHouseDetails){
                        this.cityId = this.$store.getters.get_EstateHouseDetails.cityId;
                        //判断对象是否为空
                        if(Object.keys(this.$store.getters.get_EstateHouseDetails).length != 0){
                            //判断countryName是否为美国、泰国、希腊
                            if(this.$store.getters.get_EstateHouseDetails.countryName){
                                if(this.$store.getters.get_EstateHouseDetails.countryName == '美国'){
                                    this.CityOverviewShow = true;

                                    //判断cityId是否为null，美国城市才执行下面的接口，泰国和希腊不用执行请求
                                    if(this.$store.getters.get_EstateHouseDetails.cityId){
                                        this.noDataShow = false;
                                        // 获取房价、租金走势数据
                                        this.getHousePriceRentData();
                                    }else{
                                        this.noDataShow = true;
                                    }
                                }
                            }
                        }
                    }
                })
                return this.$store.getters.get_EstateHouseDetails.countryName
            },
        },
        created() {},
        mounted() {
            this.myEcharts = echarts.init(this.$refs.housePriceRentChart);
            window.addEventListener('resize', () => {
                this.myEcharts.resize();
            });

            //预设常用的日期范围以提高用户体验
            let end = new Date();
            let oneWeekStart = new Date();
            let oneMonthStart = new Date();
            let threeMonthStart = new Date();
            oneWeekStart.setTime(oneWeekStart.getTime() - 3600 * 1000 * 24 * 7);//1周前
            oneMonthStart.setTime(oneMonthStart.getTime() - 3600 * 1000 * 24 * 30);//1月前
            threeMonthStart.setTime(threeMonthStart.getTime() - 3600 * 1000 * 24 * 90);//3月前
            this.DateRanges = {
                '1周前': [this.$moment(oneWeekStart), this.$moment(end)],
                '1月前': [this.$moment(oneMonthStart), this.$moment(end)],
                '3月前': [this.$moment(threeMonthStart), this.$moment(end)]
            };

        },
        methods: {
            // 选择日期——选项配置——只能选择今天之前的日期
            disabledDate(current) {
                return current && current > this.$moment().endOf('day');
            },
            //选择开始结束时间change事件
            timeChange(dates, dateStrings) {
                // console.log(dates, dateStrings)
                this.btime = dates.length > 0 ? this.momentFormat(dateStrings[0], 'YYYY-MM-DD') : '';
                this.etime = dates.length > 0 ? this.momentFormat(dateStrings[1], 'YYYY-MM-DD') : '';
                this.getHousePriceRentData();
            },
            // 获取房价、租金走势数据
            getHousePriceRentData(){
                this.$get(`/city/trend/${this.cityId}/${this.typeId}?btime=${this.btime}&etime=${this.etime}`).then(res => {
                    if (res.status == 0) {
                        this.noDataShow = false;
                        this.housePriceRent_echarts(res.data)
                    } else {
                        this.noDataShow = true;
                        this.$refs.housePriceRent_chart_NoData.innerText = res.msg;
                    }
                });
            },
            //----------------------------房价、租金走势——时间轴折线图----------------------------
            housePriceRent_echarts(data) {
                let dateList = data.map(item => {
                    return this.momentFormat(item['time'], 'YYYY-MM-DD');
                });
                let sfrList = data.map(function (item) {
                    return item['sfr'];
                });
                let condoList = data.map(function (item) {
                    return item['condo'];
                });
                let markPoint = {
                    data: [
                        {type: 'max', name: '最大值', symbolSize: 65},
                        {type: 'min', name: '最小值', symbolSize: 65}
                    ],
                    label: {
                        normal: {
                            formatter: function (param) {
                                let KM = '';
                                if (param.value.toString().length >= 7) {
                                    KM = (param.value / 1000000).toFixed(1) + 'M'
                                } else {
                                    KM = Math.round(param.value / 1000) + 'k'
                                }
                                return '$'+ KM;
                            }
                        }
                    }
                };
                this.myEcharts.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['独栋别墅', '公寓']
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: dateList,
                        //坐标轴刻度标签的相关设置
                        axisLabel:{
                            color: '#969696'
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            lineStyle:{
                                color: '#969696'
                            }
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '100%'],
                        //坐标轴刻度标签的相关设置
                        axisLabel: {
                            color: '#969696',
                            formatter: function (value) {
                                let KM = '';
                                if (value.toString().length >= 7) {
                                    KM = (value / 1000000).toFixed(1) + 'M'
                                } else {
                                    KM = Math.round(value / 1000) + 'k'
                                }
                                return '$' + KM;
                            }
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            show: false,
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    series: [
                        {
                            name: '独栋别墅',
                            type: 'line',
                            smooth: true,
                            data: sfrList,
                            markPoint: markPoint,
                        },
                        {
                            name: '公寓',
                            type: 'line',
                            smooth: true,
                            data: condoList,
                            markPoint: markPoint,
                        }
                    ],
                    color: ['#40c3f9', '#ffbf53'],

                });
            },
        },
        components: {
        }
    }
</script>

<style scoped lang="less" type="text/less">
    body {
        article {
            margin: 30px 0 0 0;
            >.select-time {
                margin: 10px 0;
                text-align: center;
            }
            > .chartBox {
                width: 100%;
                height: 350px;
                margin: 30px 0 0 0;
            }
            > h5 {
                text-align: center;
                font-size: 20px;
            }
        }
    }
</style>
